<template>
    <el-dialog @close="reset" title="新增/编辑" v-model="visible">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="头像" prop="avatar">
                <el-upload :on-change="chooseImg" drag ref="upload" :auto-upload="false" :limit="1"
                    :on-exceed="() => ElMessage.warning('此处只能上传一张图片')" v-model:file-list="fileList" action="#"
                    list-type="picture-card">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="角色" prop="rid">
                <el-select v-model="formData.rid" placeholder="请选择所属角色">
                    <el-option v-for="item in state.role.roleList" :key="item.id" :label="item.rolename"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="账号" prop="username">
                <el-input v-model="formData.username" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password" placeholder="请输入账号密码"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input maxlength="11" v-model="formData.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="账号状态" prop="status">
                <el-radio-group v-model="formData.status">
                    <el-radio :value="1">启用</el-radio>
                    <el-radio :value="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="reset">取消</el-button>
            <el-button type="primary" @click="submit">确认提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { adminAdd, adminUpdate } from '@/utils/api'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus';
const initFormData = {
    rid: '',
    username: '',
    password: '',
    avatar: null,
    phone: '',
    status: '',
}
const emit = defineEmits(['updateAdmin'])
const { appContext: { config: { globalProperties: { baseUrl } } } } = getCurrentInstance()

const { state, dispatch } = useStore()
onMounted(() => {
    dispatch('role/getRoleListAction')
})
const visible = ref(false)
const formRef = ref(null)
// 照片列表
const fileList = ref([])
const upload = ref(null)
const formData = ref({ ...initFormData })
const chooseImg = ({ raw }) => {
    formData.value.avatar = raw
}
// 接收待编辑菜单数据
const getEditData = (data) => {
    formData.value = { ...data }
    visible.value = true
    fileList.value = [{ url: baseUrl + data.avatar }]
}
const rules = {
    rid: { required: true, message: '请选择所属角色', trigger: 'blur' },
    username: { required: true, message: '请输入账号', trigger: 'blur' },
    phone: { required: true, message: '请输入手机号码', trigger: 'blur' },
    status: { required: true, message: '请选择账号状态', trigger: 'blur' },
}
// 重置数据
const reset = () => {
    // 重置表单
    formRef.value.resetFields()
    formData.value = { ...initFormData }
    // 关闭对话框
    visible.value = false
    // 删除id, 否则之后的操作会收到影响
    delete formData.value.id
    // 移除upload组件中用户选择的图片
    upload.value.clearFiles()
}
const submit = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            let res
            const fd = new FormData();
            for (let key in formData.value) {
                fd.append(key, formData.value[key])
            }
            if (formData.value.id > 0) {
                res = await adminUpdate(fd);
            } else {
                res = await adminAdd(fd);
            }
            const { data } = res
            if (data.code === 200) {
                ElMessage.success(data.msg)
                // 重置表单
                formRef.value.resetFields()
                // 关闭对话框
                visible.value = false
                // 删除id, 否则之后的操作会收到影响
                delete formData.value.id
                // 通知父组件更新
                emit('updateAdmin')
            } else {
                ElMessage.error(data.msg)
            }
        }
    })
}



defineExpose({ visible, getEditData })
</script>

<style></style>